<!DOCTYPE html>
<html>

	<head>
		<title>Measure example</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/jquery.js"></script>
		<script src="js/eventHandle.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/ol-debug-wo.js"></script>

		<style>
			.overlay{
				pointer-events: none;
			}
			.tooltip {
				position: relative;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 4px;
				color: white;
				padding: 4px 8px;
				opacity: 0.7;
				white-space: nowrap;
			}
			.tooltip-measure {
				opacity: 1;
				font-weight: bold;
			}
			.tooltip-static {
				background-color: #ffcc33;
				color: black;
				border: 1px solid white;
			}
			.tooltip-measure:before,
			.tooltip-static:before {
				border-top: 6px solid rgba(0, 0, 0, 0.5);
				border-right: 6px solid transparent;
				border-left: 6px solid transparent;
				content: "";
				position: absolute;
				bottom: -6px;
				margin-left: -7px;
				left: 50%;
			}
			.tooltip-static:before {
				border-top-color: #ffcc33;
			}
						/*比例尺控件*/
			.ol-scale-line{
				background-color: rgba(255, 255, 255, 0) ;
			}
			.ol-scale-line-inner{
				color: black;
				border-color: black;
			}
			/*放大 +*/
			.zoomIn{
				background: url(img/standard2.png) no-repeat 0 0;
				width: 26px;
				height: 24px;
				position: absolute;
				bottom: 223px;
				right: 10px; 
				z-index: 2;
				cursor: pointer;
			}
			/*缩小-*/
			.zoomOut{
				background: url(img/standard2.png) no-repeat 0 -204px;
				width: 26px;
				height: 24px;
				position: absolute;
				bottom: 22px;
				right: 10px; 
				z-index: 2;
				cursor: pointer;
			}
			/*下拉条*/
			.ol-zoomslider{
				background: url(img/standard2.png) no-repeat 0 -24px;
				width: 26px;
				height: 181px;
				bottom: 44px;
				right: 10px; 
				top: auto; 
				left: auto;
			}
			/*拖动滑块*/
			.ol-zoomslider-thumb{
				background:url("img/standard2.png") no-repeat -26px -68px;
				height: 11px;
				width: 20px;
			}
			/*全屏*/
			.ol-full-screen{
				background-color: transparent ;
			}
			.ol-full-screen-false{
				background-color:white ! important;
				color: #000000 ! important;
			}
			/*街市省国*/
			.holder{
				position: absolute;
				bottom: 44px;
				right: 40px; 
				width: 27px;
				height: 181px;
				display: none;
			}
			.holder div{
				position: relative;
				height: 17px;
    			width: 27px;
    			cursor: pointer;
			}
			.street{
				background: url("img/standard2.png") no-repeat -26px 0 ;
				top:10px;
			}
			.city{
				background: url("img/standard2.png") no-repeat -26px -17px;
				top:70px;
			}
			.province{
				background: url("img/standard2.png") no-repeat -26px -34px;
				top:110px;
			}
			.country{
				background: url("img/standard2.png") no-repeat -26px -51px;
				top:155px;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<!--弹出层-->
			<div id="" style="display: none;">
				<div id="test" class="tag" style="width:110px;height: 20px;position: relative; background-color:#D6E9C6 ;">
				</div>
				<!--选择操作-->
				<div id="operate" onclick="drag.removeFeature();" style="cursor: pointer;width:30px;height: 30px;line-height: 30px; text-align:center;background-color: #F9F2F4;border:2px solid;border-radius:25px;-moz-border-radius:25px;">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"  ></span>
					<!--<span class="glyphicon glyphicon-pencil" aria-hidden="true" style='cursor: pointer; margin-left: 3px;' ></span>-->
				</div>
			</div>
			<div id="holder" class="holder">
				<div id="" class="street"></div>
				<div id="" class="city"></div>
				<div id="" class="province"></div>
				<!--<div id="" class="country"></div>-->	
			</div>
			<div id="form" class="row-fluid span12">
				<form class="form-inline">
					<label>Geometry type &nbsp;</label>
					<label class="checkbox">
						<input type="checkbox" checked="checked" id="geodesic" />use geodesic measures</label>
					<label>
						<input type="radio" name="interaction" id="Range" value="Range" />测距</label>
					<label>
						<input type="radio" name="interaction" id="Measure" value="Measure" />测面积</label>
					<label>
						<input type="radio" name="interaction" id="LineString1" value="LineString1" />线1</label>
					<label>
						<input type="radio" name="interaction" id="LineString2" value="LineString2" />线2</label>
					<label>
						<input type="radio" name="interaction" id="Point1" value="Point1" />标注1</label>
					<label>
						<input type="radio" name="interaction" id="Point2" value="Point2" />标注2</label>
					<input type="button" id="move" value="定位" />
					<input type="button" name="" id="getData" value="查询" />
					<input type="button" name="toggleMap" id="toggleMap" value="地图切换" />
					<input type="button" name="dragMap" id="dragMap" value="拖动" />
				</form>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>

		</div>
		<script>
			var index = 1;
			 // feature
			var sketch;
			var helpTooltipElement;
			var helpTooltip;
			var measureTooltipElement;
			var measureTooltip;
			var tempTooltipElement;
			var tempTooltip;
			var tagTooltipElement;
			var tagTooltip;
			var operateTooltipElement;
			var operateTooltip;
			 //测面积时的提示
			var continuePolygonMsg = '单击确定起点，双击结束';
			 //测路径时的提示
			var continueLineMsg = '单击确定起点，双击结束';
			var draw; 
			 //储存vector图层的所有几何图形数据
			var collection = new Array();
			 //存储单个几何图形的数据
			var geomFeature;
			//操作的画笔类型,存储在feature中，用于区分类型
			var type;
			//用于存放feature集合
			var allFeatures = new ol.Collection();
			//zoom
			var maxZoom=18, minZoom=3, initZoom=15;
			//街市省
			var level = {"street":17,"city":10,"province":5};
			//定时器
			var slider,holde;
			/**
			 *交互控制
			 */
			$(":input[name='interaction']").change(function() {
				type = $(":input[name='interaction']:checked").attr("id");
				Draw.setActive(true);
			});
			var geodesicCheckbox = document.getElementById('geodesic');
			var wgs84Sphere = new ol.Sphere(6378137);
			 //地图图层
			var mapLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: "EPSG:4326",
					url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"
				})
			});
			 //文字图层
			var wordLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: "EPSG:4326",
					url: "http://t7.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}"
				})
			});
			 //地图
			var normalLayer = new ol.layer.Tile({
				source: new ol.source.TileArcGISRest({
					url: "http://10.120.20.122:6080/arcgis/rest/services/topology/MyMapService/MapServer"
				})
			});
			 //遥感
			var senseLayer = new ol.layer.Tile({
				source: new ol.source.TileArcGISRest({
					url: "http://10.120.20.122:6080/arcgis/rest/services/topology/遥感/MapServer"
				})
			});
			senseLayer.setVisible(false);
			 //道路图层
			var roadLayer = new ol.layer.Tile({
				source: new ol.source.TileArcGISRest({
					url: "http://10.120.20.122:6080/arcgis/rest/services/topology/网络分析/MapServer"
				})
			});
			var source = new ol.source.Vector({
				features: allFeatures
			});
			/**
			 * 生成图形样式选择,zIndex 从2开始
			 */
			var styles = {
				'Point1': [new ol.style.Style({
					image: new ol.style.Icon({
						opacity: 0.95,
						src: 'img/u234.png'
					}),
					zIndex: 2
				})],
				'Point2': [new ol.style.Style({
					image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ {
						opacity: 0.95,
						src: 'img/u304.png'
					}),
					zIndex: 2
				})],
				'Range': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: '#666',
						width: 4
					}),
					zIndex: 1
				}), new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'white',
						width: 2,
						lineDash: [10, 3]
					}),
					zIndex: 2
				}), new ol.style.Style({
					image: new ol.style.Circle({
						radius: 3,
						stroke: new ol.style.Stroke({
							color: 'red',
							width: 1
						})
					}),
					geometry: function(feature) {
						var coordinates = feature.getGeometry().getCoordinates();
						var circle = new ol.Feature(new ol.geom.MultiPoint(coordinates));
						//向collection中追加节点
						collection[feature.get("location")].push(circle);
						return circle.getGeometry();
					}
				})],
				'LineString1': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: '#666',
						width: 3
					}),
					zIndex: 2
				}), new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'white',
						width: 3,
						lineDash: [10, 20]
					}),
					zIndex: 2
				})],
				'LineString2': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'green',
						width: 4
					}),
					zIndex: 2
				})],
				'Measure': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'blue',
						lineDash: [4],
						width: 3
					}),
					fill: new ol.style.Fill({
						color: 'rgba(0, 0, 255, 0.1)'
					})
				})],
				'GeometryCollection': [new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'magenta',
						width: 2
					}),
					fill: new ol.style.Fill({
						color: 'magenta'
					}),
					image: new ol.style.Circle({
						radius: 10,
						fill: null,
						stroke: new ol.style.Stroke({
							color: 'magenta'
						})
					}),
					zIndex: 2
				})]
			};
			 //根据所设置的type值获取样式
			var styleFunction = function(feature, resolution) {
				if(feature.get("type")){
					return styles[feature.get("type")];
				}
				return styles["GeometryCollection"];
			};
			 //用户自定义绘制图层
			var vector = new ol.layer.Vector({
				source: source,
				//回调函数，当draoend结束时调用
				style: styleFunction
			});
			var view = new ol.View({
				center: [117.39758, 39.14407], //必需
				projection: "EPSG:4326", //必需
				extent:[117.32179299038442,39.1131412,117.46141976220655,39.18537655771531],
				zoom: initZoom, //必需
				minZoom: minZoom,
				maxZoom: maxZoom
			});
			/**
			 * 初始化map
			 */
			var map = new ol.Map({
				layers: [mapLayer, wordLayer, roadLayer, vector]/*[normalLayer,senseLayer,roadLayer,vector]*/,
				target: 'map',
				view: view,
				controls: [
					new ol.control.FullScreen(), new ol.control.ScaleLine(), new ol.control.ZoomSlider(), new ol.control.MousePosition()
				]
			});
			/**
			 * 画笔选择
			 */
			var Draw = {
				init: function() {
					map.addInteraction(this.Point1);
					this.Point1.setActive(false);
					this.setEvents("Point1");
					map.addInteraction(this.Point2);
					this.Point2.setActive(false);
					this.setEvents("Point2");
					map.addInteraction(this.Range);
					this.Range.setActive(false);
					this.setEvents("Range");
					map.addInteraction(this.LineString1);
					this.LineString1.setActive(false);
					this.setEvents("LineString1");
					map.addInteraction(this.LineString2);
					this.LineString2.setActive(false);
					this.setEvents("LineString2");
					map.addInteraction(this.Measure);
					this.Measure.setActive(false);
					this.setEvents("Measure");
					/*map.addInteraction(this.GeometryCollection);
					this.GeometryCollection.setActive(false);*/
				},
				Point1: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('Point'),
					style: function(feature, resolution) {
						return styles["Point1"];
					}
				}),
				Point2: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('Point'),
					style: function(feature, resolution) {
						return styles["Point2"];
					}
				}),
				Range: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('LineString'),
					style: [new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: '#666',
							width: 4
						}),
						zIndex: 1
					}), new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'white',
							width: 2,
							lineDash: [10, 3]
						}),
						zIndex: 2
					})]
				}),
				LineString1: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('LineString'),
					style: [new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: '#666',
							width: 3
						}),
						zIndex: 1
					}), new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'white',
							width: 3,
							lineDash: [10, 20]
						}),
						zIndex: 2
					})]
				}),
				LineString2: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('LineString'),
					style: new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'green',
							width: 4
						})
					})
				}),
				Measure: new ol.interaction.Draw({
					source: vector.getSource(),
					type: ('Polygon')
				}),
				setEvents: function(activeType) {
					//设置绘画监听事件
					var listener;
					this[activeType].on('drawstart',
						function(evt) {
							//初始化存储
							geomFeature = new Array();
							sketch = evt.feature;
							geomFeature.push(sketch);
							//设置feature的type属性
							sketch.set("type", type);
							if (type == "Range" || type == "Measure") {
								var tooltipCoord = evt.coordinate;
								listener = sketch.getGeometry().on('change', function(evt) {
									var geom = evt.target;
									var output;
									if (geom instanceof ol.geom.Polygon) {
										output = formatArea((geom));
										tooltipCoord = geom.getInteriorPoint().getCoordinates();
									} else if (geom instanceof ol.geom.LineString) {
										output = formatLength((geom));
										tooltipCoord = geom.getLastCoordinate();
									}
									measureTooltipElement.innerHTML = output;
									measureTooltip.setPosition(tooltipCoord);
								});
							}
						}, this);
					this[activeType].on('drawend',
						function(evt) {
							if (type == "Range") {
								tempTooltipElement.className = 'tooltip tooltip-static';
								tempTooltip.setOffset([0, -7]);
								map.removeOverlay(measureTooltip);
								//向collection中追加节点
								var len = collection.push(geomFeature) - 1;
								evt.feature.set("location", len);
								tempTooltipElement.innerHTML += "<span class='glyphicon glyphicon-remove' aria-hidden='true' style='cursor: pointer;' onclick='removeFeature(" + len + ");'></span>";
							}
							if (type == "Measure") {
								measureTooltipElement.className = 'tooltip tooltip-static';
								measureTooltip.setOffset([0, -7]);
								geomFeature.push(measureTooltip);
								//向collection中追加节点
								var len = collection.push(geomFeature) - 1;
								evt.feature.set("location", len);
								measureTooltipElement.innerHTML += "<span class='glyphicon glyphicon-remove' aria-hidden='true' style='cursor: pointer;' onclick='removeFeature(" + len + ");'></span>";
							}
							//重置画笔
							Draw.setActive(false);
							$(":input[name='interaction']:checked").attr("checked", false);
							// unset sketch
							sketch = null;
							createMeasureTooltip();
							ol.Observable.unByKey(listener);
							//添加图层鼠标事件
							$(".ol-overlay-container").removeClass("overlay");
						}, this);
				},
				setActive: function(active) {
					//激活画笔
					if (active) {
						this.previousType && this[this.previousType].setActive(false);
						this[type].setActive(true);
						this.previousType = type;
						//去除图层的鼠标事件
						$(".ol-overlay-container").addClass("overlay");
						//取消鼠标双击放大事件
						this.setInteraction(false);
						//取消鼠标修改事件
						modify.setActive(false);
					} else {
						this.previousType && this[this.previousType].setActive(false);
						this.previousType = null;
						setTimeout("Draw.setInteraction(true)", 1000);
					}
				},
				//取消鼠标双击放大事件
				setInteraction: function(active) {
					var interactions = map.getInteractions();
					interactions.forEach(function(element, index, array) {
						if (element instanceof ol.interaction.DoubleClickZoom) {
							element.setActive(active);
						}
					});
				},
				getActive: function(){
					return this.previousType ? this[this.previousType].getActive() : false;
				}
			};
			 //初始化画笔
			Draw.init();
			/**
			 * 针对鼠标移动事件做处理，弹出提示框
			 * @param {Object} evt
			 */
			var pointerMoveHandler = function(evt) {
				if (evt.dragging) {
					return;
				}
				/** @type {string} */
				var helpMsg = '单击确定起点，双击结束';
				/*if (sketch) {
					var geom = (sketch.getGeometry());
					if (geom instanceof ol.geom.Polygon) {
						helpMsg = continuePolygonMsg;
					} else if (geom instanceof ol.geom.LineString) {
						helpMsg = continueLineMsg;
					}
				}*/
				helpTooltipElement.innerHTML = helpMsg;
				helpTooltip.setPosition(evt.coordinate);
				$(helpTooltipElement).removeClass('hidden');
			};
			 //帮助信息
			map.on('pointermove', pointerMoveHandler);
			map.on("click", function(evt) {
				if (sketch) {
					if (type == "Range") {
						var geom = (sketch.getGeometry());
						var tooltipCoord = evt.coordinate;
						var output;
						output = formatLength(geom);
						if (tooltipCoord[0] == geom.getFirstCoordinate()[0] && tooltipCoord[1] == geom.getFirstCoordinate()[1]) {
							return;
						}
						if (output == "0 m") {
							return;
						}
						createTempTooltip();
						tempTooltipElement.innerHTML = output;
						tempTooltip.setPosition(tooltipCoord);
						geomFeature.push(tempTooltip);
					}
				}
			});
			$(map.getViewport()).on('mouseout', function() {
				$(helpTooltipElement).addClass('hidden');
			});
			/**
			 * Creates a new help tooltip
			 */
			function createHelpTooltip() {
					helpTooltipElement = document.createElement('div');
					helpTooltipElement.className = 'tooltip hidden';
					helpTooltip = new ol.Overlay({
						element: helpTooltipElement,
						offset: [15, 0],
						positioning: 'center-left'
					});
					map.addOverlay(helpTooltip);
				}
				/**
				 * Creates a new measure tooltip
				 */

			function createMeasureTooltip() {
					measureTooltipElement = document.createElement('div');
					measureTooltipElement.className = 'tooltip tooltip-measure';
					measureTooltip = new ol.Overlay({
						element: measureTooltipElement,
						offset: [0, -15],
						positioning: 'bottom-center'
					});
					map.addOverlay(measureTooltip);
				}
			/**
			 * 创建临时图层
			 */

			function createTempTooltip() {
					tempTooltipElement = document.createElement('div');
					tempTooltipElement.className = 'tooltip tooltip-measure';
					tempTooltip = new ol.Overlay({
						element: tempTooltipElement,
						offset: [0, -15],
						positioning: 'bottom-center'
					});
					map.addOverlay(tempTooltip);
				}
			/**
			 * 创建标注层
			 */

			function createTagTooltip() {
				tagTooltipElement = document.getElementById('test').cloneNode(true);
				tagTooltip = new ol.Overlay({
					element: tagTooltipElement,
					offset: [0, -15],
					positioning: 'bottom-center'
				});
				map.addOverlay(tagTooltip);
			}
			/**
			 * 创建操作层
			 */

			function createOperateTooltip() {
				operateTooltipElement = document.getElementById('operate').cloneNode(true);
				operateTooltip = new ol.Overlay({
					element: operateTooltipElement,
					offset: [0, -15],
					positioning: 'bottom-center'
				});
				map.addOverlay(operateTooltip);
			}
			/**
			 * 测距
			 * @param {ol.geom.LineString} line
			 * @return {string}
			 */
			var formatLength = function(line) {
				var length;
				if (geodesicCheckbox.checked) {
					var coordinates = line.getCoordinates();
					length = 0;
					var sourceProj = map.getView().getProjection();
					for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
						var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
						var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
						length += wgs84Sphere.haversineDistance(c1, c2);
					}
				} else {
					length = Math.round(line.getLength() * 100) / 100;
				}
				var output;
				if (length > 100) {
					output = (Math.round(length / 1000 * 100) / 100) +
						' ' + 'km';
				} else {
					output = (Math.round(length * 100) / 100) +
						' ' + 'm';
				}
				return output;
			};
			/**
			 * 计算面积
			 * @param {ol.geom.Polygon} polygon
			 * @return {string}
			 */
			var formatArea = function(polygon) {
				var area;
				if (geodesicCheckbox.checked) {
					var sourceProj = map.getView().getProjection();
					var geom = /** @type {ol.geom.Polygon} */ (polygon.clone().transform(
						sourceProj, 'EPSG:4326'));
					var coordinates = geom.getLinearRing(0).getCoordinates();
					area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
				} else {
					area = polygon.getArea();
				}
				var output;
				if (area > 10000) {
					output = (Math.round(area / 1000000 * 100) / 100) +
						' ' + 'km<sup>2</sup>';
				} else {
					output = (Math.round(area * 100) / 100) +
						' ' + 'm<sup>2</sup>';
				}
				return output;
			};
			/**
			 * 删除与测距相关的数据
			 * @param {Object} feature
			 * @param {Object} circle
			 */
			var removeFeature = function(index) {
				var temp = collection[index];
				for (var i = 0; i < temp.length; i++) {
					try {
						if (temp[i] instanceof ol.Feature) {
							source.removeFeature(temp[i]);
						} else {
							map.removeOverlay(temp[i]);
						}
					} catch (e) {}
				}
			};
			/**
			 * 放大
			 */

			function zoomIn() {
				var zoom = map.getView().getZoom();
				map.getView().setZoom(zoom + 1);
			}
			/**
			 * 缩小
			 */
			function zoomOut() {
				var zoom = map.getView().getZoom();
				map.getView().setZoom(zoom - 1);
			}
			//设置放大级别
			
			//添加放大缩小控件
			$(".ol-overlaycontainer-stopevent").prepend("<div id='' class='zoomIn' onclick='zoomIn()'></div>");
			$(".ol-overlaycontainer-stopevent").prepend("<div id='' class='zoomOut' onclick='zoomOut()'></div>");
			$(".ol-overlaycontainer-stopevent").prepend("<div id='zoom' ></div>")
			//添加省市街控件
			$(".ol-overlaycontainer-stopevent").prepend($("#holder")[0]);
			$(".holder div").each(function(){
				$(this).click(function(){
					map.getView().setZoom(level[$(this).attr("class")]);
				});
			});
			//为控件绑定事件
			$(".ol-zoomslider").bind({
				mouseenter:function(){
					clearTimeout(slider);
					clearTimeout(holde);
					$(".holder").show();
				},
				mouseleave:function(){
					slider = setTimeout("$('.holder').hide()",2000);
				}
			});
			$(".holder").bind({
				mouseenter:function(){
					clearTimeout(slider);
					clearTimeout(holde);
					$(".holder").show();
				},
				mouseleave:function(){
					holde = setTimeout("$('.holder').hide()",2000);
				}
			});
			//定位
			//路线高亮
			//坐标高亮
			var MapUtil = {
				/**
				 * 定位feature 
				 * @param {Object} feature
				 */
				location:function(feature){
					
					var geom = feature.getGeometry();
					var duration = 2000;
					var start = +new Date();
					var pan = ol.animation.pan({
						duration: duration,
						start: start,
						source:view.getCenter()
					});
					var bounce = ol.animation.bounce({
						duration: duration,
						resolution: 4 * view.getResolution(),
						start: start
					});
					var zoom = ol.animation.zoom({
						resolution: view.getResolution()
					});
					map.beforeRender(pan,bounce, zoom);
					if(view.getZoom() < maxZoom){
						view.setZoom(view.getZoom() + 1);
					}
					if(geom instanceof ol.geom.Point){
						view.setCenter(geom.getFirstCoordinate());
					}else if(geom instanceof ol.geom.LineString){
						var coor = [];
						console.log(geom.getFirstCoordinate());
						coor[0] = (geom.getFirstCoordinate()[0]+geom.getLastCoordinate()[0])/2;
						coor[1] = (geom.getFirstCoordinate()[1]+geom.getLastCoordinate()[1])/2;
						view.setCenter(coor);
					}else if(geom instanceof ol.geom.Polygon){
						view.setCenter(geom.getInteriorPoint().getFirstCoordinate());
					}
					
					
					
				},
				/**
				 * ol.feature
				 * @param {Object} linStrig
				 */
				lineHight: function(linStrig){
					var newFeature = linStrig.clone();
					newFeature.setStyle(new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'rgba(255, 0, 0, ' + 0.3 + ')',
							width: 10,
							zIndex:0
						})
					}));
					var interval = setInterval(function() {
						source.addFeature(newFeature);
						setTimeout(function() {
							source.removeFeature(newFeature);
						}, 200);
					}, 500);
					setTimeout(function() {
						clearInterval(interval);
					}, 7000);
				},
				pointHight: function(point){
					var interval = setInterval(function() {
						source.removeFeature(point);
						setTimeout(function() {
							source.addFeature(point);
						}, 200);
					}, 500);
					setTimeout(function() {
						clearInterval(interval);
					}, 7000);
				}
			}
			//查询
			$("#getData").click(function(){
				/*$.ajax({
					type:"post",
					url:"js/data.json",
					dataType: "json",
					success:function(data){
						var features = (new ol.format.GeoJSON()).readFeatures(data);
						source.addFeatures(features);
						MapUtil.location(testFeature);
						MapUtil.pointHight(testFeature);
					}
				});*/
				$.getJSON("js/data.json",function(data){
					var features = (new ol.format.GeoJSON()).readFeatures(data);
					source.addFeatures(features);
					MapUtil.pointHight(testFeature);
				})
			});
			/**
			 * 拖动
			 */
			function Drag(){
				ol.interaction.Pointer.call(this, {
					handleDownEvent: Drag.prototype.handleDownEvent,
					handleMoveEvent: Drag.prototype.handleMoveEvent
				});
				this.coordinate_ = null;
				this.cursor_ = 'pointer';
				this.feature_ = null;
				this.previousCursor_ = undefined;
			}
			ol.inherits(Drag, ol.interaction.Pointer);
			Drag.prototype.handleDownEvent = function(evt) {
				var map = evt.map;
				var feature = map.forEachFeatureAtPixel(evt.pixel,
					function(feature, layer) {
						return feature;
					}
				);
				if(feature && !Draw.getActive()){
					this.feature_ = feature;
					if(this.feature_.get("type") == "Range" || this.feature_.get("type") == "Measure"){
						return false;
					}
					operateTooltip.setPosition(evt.coordinate);
					return true;
				}else{
					operateTooltip.setPosition();
					return false;
				}
			};
			Drag.prototype.handleMoveEvent = function(evt) {
				var map = evt.map;
				var feature = map.forEachFeatureAtPixel(evt.pixel,
					function(feature, layer) {
						return feature;
					});
				var element = evt.map.getTargetElement();
				//编程思想
				if (feature && !Draw.getActive()) {
					if (element.style.cursor != this.cursor_) {
						this.previousCursor_ = element.style.cursor;
						element.style.cursor = this.cursor_;
					}
				} else if (this.previousCursor_ !== undefined) {
					element.style.cursor = this.previousCursor_;
					this.previousCursor_ = undefined;
				}
			};
			//移除选中的feature
			Drag.prototype.removeFeature = function(){
				source.removeFeature(this.feature_);
				operateTooltip.setPosition();
			};
			//操作feature
			Drag.prototype.operateFeature = function(evt){
				operateTooltip.setPosition();
			};
			var drag = new Drag();
			map.addInteraction(drag);
			//通过拖动来实现区域查询
			var dragBox = new ol.interaction.DragBox({
			 	style:new ol.style.Style({
			 		stroke: new ol.style.Stroke({
			 			color:"red"
			 		}),
			 	}),
			 	condition: ol.events.condition.altKeyOnly
			});
			dragBox.on("boxend",function(evt){
			 	var geom = this.getGeometry();
			 	//获得查询区域，向后台发送数据，实现查询，并将结果显示
			 	console.log(geom.getExtent());
			 	console.log(geom.getCoordinates());
			});
			map.addInteraction(dragBox);
			/**
			 * 初始化操作
			 */
			createMeasureTooltip();
			createHelpTooltip();
			createTagTooltip();
			createOperateTooltip();
			
			//添加测试数据
			var testFeature = new ol.Feature(new ol.geom.Point([117.40049,39.13981]));
			testFeature.set("type","Point1");
			testFeature.set("featureId",["wo-01","wo-02"]);
			testFeature.set("index",[2,2]);
			source.addFeature(testFeature);
			var modify = new ol.interaction.Modify({
				features: source.getFeaturesCollection() 
			});
			modify.setActive(false);
			map.addInteraction(modify);
			 //定位
			$("#move").click(function() {
				var line = new ol.Feature(new ol.geom.LineString([[117.39304,39.13470],[117.39504,39.13670]]));
				source.addFeature(line);
				MapUtil.location(line);
				MapUtil.lineHight(line);
			});
			//地图切换
			$("#toggleMap").click(function(){
				if(senseLayer.getVisible()){
					normalLayer.setVisible(true);
					senseLayer.setVisible(false);
				}else{
					senseLayer.setVisible(true);
					normalLayer.setVisible(false);
				}
			});
			//拖到时鼠标切换
			$("#dragMap").click(function(){
				if($("#map").css("cursor") == "auto"){
					$("#map").css("cursor","crosshair");
					$("#dragMap").css("background-color","red");
					if(Draw.getActive()){
						Draw.setActive(false);
						$(":input[name='interaction']:checked").attr("checked", false);
					}
					modify.setActive(true);
				}else{
					$("#dragMap").css("background-color","");
					$("#map").css("cursor","auto");
					modify.setActive(false);
				}
			});
			
//			source.forEachFeatureInExtent(start[0]-1)
			/*console.log(ol.proj.fromLonLat(117.39773511886598, 39.15177583694458));
			console.log(ol.proj.fromLonLat(117.39734888076784, 39.151904582977295));*/
		</script>
	</body>

</html>